<template>
  <div class="stock-list">
    <button @click="show=true">添加唱片</button>
    <table>
      <tr>
        <td>序号</td>
        <td>唱片</td>
        <td>歌手</td>
        <td>价格</td>
        <td>库存</td>
        <td>操作</td>
      </tr>
      <tr
        v-for="(d,i) in list"
        :key="d.id"
      >
        <td>{{ i + 1 }}</td>
        <td>{{d.album}}</td>
        <td>{{d.singer}}</td>
        <td>{{d.price}}</td>
        <td>{{d.number}}</td>
        <td>
          <button>查看详情</button>
        </td>
      </tr>
    </table>
    <add-modal
      v-show="show"
      @close="show=false"
      @add='add'
    ></add-modal>
    <router-view></router-view>
  </div>
</template>

<script>
import AddModal from './AddModal.vue'
import  albumList from './albumList.js'
  export default {
    components:{AddModal},
    data(){
      return {
        list:[],
        show:false
      }
    },
    created(){
      //没有值返回null
      const storageList = localStorage.getItem('stock-list');
      this.list = storageList ? JSON.parse(storageList):albumList
    },
    methods:{
      add(obj){
        this.list.push({
          id:'ALBUM'+new Date(),
          ...obj
        })
        localStorage.setItem('stock-list',JSON.stringify(this.list))
        this.show=false
      }
    }
  }
</script>

<style lang="sass" scoped>
.stock-list
  table
    margin: 0 auto
    border-collapse: collapse
  td
    border: 1px solid #ccc
</style>
